<template>
<!-- 左侧菜单 -->
   <el-row class="tac">
            <el-col :span="24">
              <el-menu
                active-text-color="#ffd04b"
                background-color="#545c64"
                class="el-menu-vertical-demo"
                :default-active="$route.path"
                text-color="#fff"
                :collapse="menuopenS"
                router
              >
                <el-menu-item
                  index="/Index/IndexAbout"
                  @click="tagmenudd(0,'/Index/IndexAbout')"
                >
                  <el-icon>
                    <span class="iconfont  icon-shouye1"></span>
                  </el-icon>
                  <span>首页</span>
                </el-menu-item>
                <el-sub-menu
                  :index="'/Index/'+item.path"
                  v-for="item in menu"
                  :key="item.name"
                >
                  <template #title>
                    <el-icon>
                      <span :class="'iconfont ' +item.meta.icon"></span>
                    </el-icon>
                    <span>{{item.meta.title}}</span>
                  </template>
                  <el-menu-item-group title="">
                    <el-menu-item
                      v-show="item2.name!='ProductAdd' && item2.name!='ProductEdit'"
                      :index="'/Index/'+item.path+'/'+item2.path"
                      v-for="item2 in item.children"
                      :key="item2.name"
                      @click="tagmenudd(item2,'/Index/'+item.path+'/'+item2.path)"
                    >
                    {{item2.meta.title}}
                    </el-menu-item>

                  </el-menu-item-group>
                </el-sub-menu>
              </el-menu>
            </el-col>
          </el-row>
</template>

<script>
import menu from '@/router/page' // 引入page路由
export default {
  components:{

    },
    props:{
       menuopenS: Boolean, // 面包屑与左侧菜单展开与折叠的布尔值
      //  required: true
    },
    data(){
      return{
         // 引入路由--信息
      menu,
        // dynamicTags: [{ title: '首页', name: '/Index/IndexAbout' }],
      // 选中状态
      checked: '/Index/IndexAbout',
      }
    },
  setup() {

  },
  created(){
     this.$emit('dynamicTagslist',this.dynamicTags)
  },
  watch:{
    $route(){
// this.tagmenudd()
    }
  },
  methods:{
     // 点击左侧菜单获取菜单名
    tagmenudd (item, name) {
//  this.$emit('dynamicTagslist',this.dynamicTags)
  //子传父
      // this.$emit('checkedok',this.checked)

      this.$route.path = name
      if (name == '/Index/IndexAbout') return

      // const taglist = this.dynamicTags // 将数组用变量接收
      // const findTab = taglist.find((a) => a.title == item.meta.title) // 用find方法来一一检索去重
      // if (!findTab) {
        // 点击的标签如果不是检索的就追加到this.dynamicTags数组里
        // this.dynamicTags.push({ title: item.meta.title, name: name })

      //子传父
      // this.$emit('dynamicTagslist',this.dynamicTags)
      // }
    },

  }
}
</script>

<style lang="less" scoped>
// 树形控件----左侧菜单
 .el-menu {
    border-right: #545c64 1px solid;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    // min-height: 400px;
  }
</style>

